<script setup>
import { storeToRefs } from 'pinia';
import LinCardContentM from '../components/cards/LinCardContentM.vue';
import { onMounted, ref, watch } from 'vue';
import { getArticleList } from '../request/api/article';
import { useRouter } from 'vue-router';
const $router = useRouter()
const resultList = ref([])
let articleList = ref([])
let flag = ref(false)

// 搜索功能
const onSearch = () => {
    let searchValue = document.querySelector('.search-box input').value
    if (searchValue) {
        articleList.value = resultList.value.filter(item => item.title.includes(searchValue))
    } else {
        articleList.value = resultList.value
    }
}


// 样式控制
const onActive = (e) => {
    // 获取当前元素
    // console.log(e.target)
    let tagDom = e.target
    if (tagDom.classList.contains('active')) {
        // 如果当前元素已经处于激活状态，则不做任何操作
        return
    } else {
        // 如果当前元素没有处于激活状态，则移除所有兄弟元素的激活状态，并给当前元素添加激活状态
        const siblings = tagDom.parentElement.children
        for (let i = 0; i < siblings.length; i++) {
            siblings[i].classList.remove('active')
        }
        tagDom.classList.add('active')
    }
}

onMounted(async () => {
    await getArticleList().then(res => {
        resultList.value= res.data.data
        articleList.value = res.data.data
        flag.value = true
    })
})
</script>

<template>
    <div class="article-list">
        <!-- 头部 -->
        <header>
            <div class="top">
                <div class="search-box">
                    <input type="text" placeholder="请输入内容" @input="onSearch"> 
                    <button @click="onSearch">搜索</button>
                </div>
                <div class="category-box">
                    <ul>
                        <li class="active" @click="onActive($event)">全部</li>
                        <!-- <li @click="onActive($event)">前端</li>
                        <li @click="onActive($event)">后端</li>
                        <li @click="onActive($event)">调试</li>
                        <li @click="onActive($event)">系统</li> -->
                    </ul>
                </div>
            </div>
        </header>
        <main>
            <div class="lis-box">
                <LinCardContentM v-if="flag" v-for="item in articleList" :key="item.articleId" :data="item"
                    @click="$router.push(`/articleDetail/${item.articleId}`)"></LinCardContentM>
            </div>
        </main>
    </div>
</template>

<style lang="scss" scoped>
.article-list {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    header {
        background-color: #C6DFDF;
        width: 100%;
        height: 240px;
        display: flex;
        justify-content: center;
        align-items: center;
        padding-bottom: 10px;

        .top {
            height: 100%;
            width: 900px;
            display: flex;
            justify-content: end;
            align-items: center;
            flex-direction: column;

            .search-box {
                // margin-top: 150px;
                width: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: #C6DFDF;
                border-radius: 5px;
                box-shadow: 1px 1px 5px 1px #beb7b7;

                input {
                    width: 840px;
                    height: 50px;
                    border-radius: 5px 0 0 5px;
                    border: 0;
                    padding: 0 10px;
                    outline: none;
                    background-color: #C6DFDF;
                }

                button {
                    width: 60px;
                    height: 50px;
                    border-radius: 5px;
                    border: 0;
                    background-color: #08D9D6;
                    cursor: pointer;
                }
            }

            .category-box {
                width: 100%;
                margin-top: 20px;

                ul {
                    display: flex;
                    justify-content: left;
                    align-items: center;

                    li {
                        margin: 10px;
                        cursor: pointer;
                        color: #fff;
                        padding: 10px;
                        height: 30px;
                        line-height: 10px;
                        text-align: center;
                        border-radius: 5px;

                    }

                    .active {
                        background-color: #fff;
                        color: #08D9D6;
                    }
                }
            }
        }
    }

    main {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: left;
        align-items: center;
        background-color: white;
    }

}
.lis-box {
    width: 900px;
    margin: 10px;
    padding: 10px;
    background-color: #fff;
}
</style>